<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="manifest" href="./manifest.json">
	<link rel="apple-touch-icon" href="images/icon.png">
	<title>Yarn</title>
</head>

<body>
	<!-- Fancy Background -->
	<div id="app-bg">&nbsp;</div>

	<!-- Container -->
	<div id="app">

		<!-- search form -->
		<div class="app-search">
			<form class="menu" autocomplete="off" onkeypress="return event.keyCode != 13;">
				<input id="nodeSearchInput" type="search" class="search-field" placeholder="Search" autocomplete="off" oninput="app.ui.openNodeListMenu('open')" onmouseenter="app.ui.openNodeListMenu('open')">

				<span>
					<span class="search-title styled-checkbox">
						<input type="checkbox" checked="checked" id="search-title" />
						<label for="search-title">Title</label>
					</span>
					<span class="search-body styled-checkbox">
						<input type="checkbox" id="search-body" />
						<label for="search-body">Body</label>
					</span>
					<span class="search-tags styled-checkbox">
						<input type="checkbox" id="search-tags" />
						<label for="search-tags">Tags</label>
					</span>
				</span>

				<div class="dropdown shrink-when-narrow">
					<div id="openHelperMenu"></div>
				</div>
			</form>
		</div>

		<!-- add node -->
		<div class="app-add-node" data-bind="click:app.newNode" title="Create Node">
			<span>
				<svg class="icon icon-plus icon-lg icon-fw">
					<use xlink:href="public/icons.svg#icon-plus"></use>
				</svg>
			</span>
		</div>

		<!-- undo/redo controls -->
		<div class="app-undo-redo app-button">
			<span data-bind="click: function() { app.historyDirection('undo'); }" title="Undo">
				<svg class="icon icon-undo icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-undo"></use></svg>
			</span>
			<span data-bind="click: function() { app.historyDirection('redo'); }" title="Redo">
				<svg class="icon icon-undo icon-lg icon-fw icon-flip"><use xlink:href="public/icons.svg#icon-undo"></use></svg>
			</span>
		</div>

		<!-- align controls -->
		<div class="app-sort app-button">
			<span data-bind="click: app.workspace.alignH, event: { dblclick: app.workspace.reduceAlignH }" title="Align Horizontally"><svg class="icon icon-ellipsis-h icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-ellipsis-h"></use></svg></span>
			<span data-bind="click: app.workspace.alignV, event: { dblclick: app.workspace.reduceAlignV }" title="Align Vertically"><svg class="icon icon-ellipsis-v icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-ellipsis-v"></use></svg></span>
			<span data-bind="click: app.workspace.arrangeSpiral" title="Align Spiral"><svg class="icon icon-spinner icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-spinner"></use></svg></span>
			<span data-bind="click: app.workspace.sortAlphabetical" title="Sort Alphabetically"><svg class="icon icon-sort-alpha-asc icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-sort-alpha-asc"></use></svg></span>
		</div>

		<!-- zoom controls -->
		<div class="app-zoom app-button">
			<span data-bind="click: function() { app.workspace.setZoom(4); }" title="Zoom 1:1"><svg class="icon icon-square icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-square"></use></svg></span>
			<span data-bind="click: function() { app.workspace.setZoom(3); }" title="Zoom 2:1"><svg class="icon icon-th-large icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-th-large"></use></svg></span>
			<span data-bind="click: function() { app.workspace.setZoom(2); }" title="Zoom 3:1"><svg class="icon icon-th icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-th"></use></svg></span>
			<span data-bind="click: function() { app.workspace.setZoom(1); }" title="Zoom 4:1"><svg class="icon icon-th icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-th-small"></use></svg></span>
		</div>

		<!-- main menu -->
		<div class="app-menu" id="appHeader">
			<!-- File menu -->
			<div class="menu" id="appFileMenu">
				<span class="title">Menu</span>
				<div class="dropdown" id="fileMenuDropdown">
				</div>
			</div>
		</div>

		<!-- grid bg for snap to grid functionality -->
		<canvas id="grid-canvas" class="grid-canvas"></canvas>

		<!-- arrow bg canvas for linked nodes -->
		<canvas class="arrows" id="arrows"></canvas>

		<!-- foreach loop	of the nodes -->
		<div class="nodes">
			<div class="nodes-holder" data-bind="foreach: { data: app.nodes, as: 'node' }">
				<div class="node" data-bind="nodeBind: true, css: { inactive: !node.active()}, attr: { title: '[ ' + node.title() + ' ]\n' + node.body() }">
					<div class="title-container" data-bind="css: { active: node.active() && node.active().title === true}">
						<div class="title" data-bind="text: node.title, css: 'title ' + node.titleStyles[node.colorID()]"></div>
					</div>
					<div class="body" data-bind="html: node.clippedBody, css: { active: node.active() && node.active().body === true}"></div>
					<div class="tags" data-bind="visible:node.clippedTags, foreach: { data: node.clippedTags, as: 'tag' }, css: { active: node.active() && node.active().tags === true}">
						<span data-bind="text: tag.text, css: tag.style"></span>
					</div>
					<div class="colorDown" data-bind="click: node.cycleColorDown, visible: app.canEditNodeMeta(node.title())"><svg class="icon icon-arrow-left icon-fw"><use xlink:href="public/icons.svg#icon-arrow-left"></use></svg></div>
					<div class="colorUp" data-bind="click: node.cycleColorUp, visible: app.canEditNodeMeta(node.title())"><svg class="icon icon-arrow-left icon-fw icon-flip"><use xlink:href="public/icons.svg#icon-arrow-left"></use></svg></div>
					<!--<div class="icon edit" data-bind="click: function() { app.editNode(node); }"></div>-->
					<div class="delete" data-bind="click: () => app.confirmDeleteNodes(node), visible: app.canEditNodeMeta(node.title())"><svg class="icon icon-trash icon-fw"><use xlink:href="public/icons.svg#icon-trash"></use></svg></div>
					<!--<div class="resize" data-bind="click:node.toggleExpand"></div>-->
				</div>
			</div>
		</div>

		<!-- ko if:app.editing() != null -->
		<div id="node-editor-background" data-bind="mousedown: function() { app.saveNode(); app.closeEditor(); }"></div>
		<div id="node-editor" class="node-editor">

			<div id="editor-form" class="form">
				<input type="text" id="editorTitle" class="title" oninput="app.validateTitle()" data-bind="value: app.editing().title;" onfocus="app.togglePreviewMode(true)" onblur="app.sanitiseNodeTitle()" placeholder="Title">
				<input type="text" id="editorTags" data-bind="value: app.editing().tags, visible: !app.isEditorInPlayMode() && app.settings.documentType() === 'yarn'" onfocus="app.togglePreviewMode(true)" placeholder="Tags(use spaces)">

				<div id="bbcodeToolbar" class="bbcode-toolbar">
					<button class="bbcode-button" onclick="app.openLastEditedNode()" title="Go Back To Last Edited Node" onfocus="app.togglePreviewMode(false)">
						<svg class="icon icon-arrow-left icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-arrow-left"></use></svg>
					</button>
					<span class="hide-when-narrow">&nbsp;</span>
					<span class="hide-when-narrow bbcode-button-separator">||</span>
					<span class="hide-when-narrow">&nbsp;</span>
					<button class="bbcode-button" onclick="app.richTextFormatter.insertTag('b')" title="Bold">
						<svg class="icon icon-bold icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-bold"></use></svg>
					</button>
					<button class="bbcode-button" onclick="app.richTextFormatter.insertTag('i')" title="Italic">
						<svg class="icon icon-italic icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-italic"></use></svg>
					</button>
					<button class="bbcode-button" onclick="app.richTextFormatter.insertTag('u')" title="Underlined">
						<svg class="icon icon-underline icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-underline"></use></svg>
					</button>
					<span class="hide-when-narrow">&nbsp;</span>
					<span class="hide-when-narrow bbcode-button-separator">||</span>
					<span class="hide-when-narrow">&nbsp;</span>
					<button class="bbcode-button" onclick="app.richTextFormatter.insertTag('cmd')" title="Command">
						<svg class="icon icon-angle-double-left icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-angle-double-left"></use></svg>
					</button>
					<button class="bbcode-button" onclick="app.richTextFormatter.insertTag('opt')" title="Choice/Link">
						<svg class="icon icon-link icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-link"></use></svg>
					</button>
					<span class="hide-when-narrow">&nbsp;</span>
					<span class="hide-when-narrow bbcode-button-separator">||</span>
					<span class="hide-when-narrow">&nbsp;</span>
					<button class="hide-when-narrow bbcode-button" onclick="app.richTextFormatter.insertTag('img')" title="Image">
						<svg class="icon icon-image icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-image"></use></svg>
					</button>
					<button class="bbcode-button" onclick="app.richTextFormatter.insertTag('color')" title="Color Picker">
						<svg class="icon icon-palette icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-palette"></use></svg>
					</button>

					<span class="styled-checkbox show-when-narrow">
						<input id="toglAutocompleteSuggestions" type="checkbox" data-bind="checked: app.settings.autocompleteSuggestionsEnabled" onclick="app.toggleAutocompleteSuggestions()"></input>
						<label for="toglAutocompleteSuggestions" title="Autocompletion Suggestions"><svg class="icon icon-comment icon-fw icon-lg"><use xlink:href="public/icons.svg#icon-comment"></use></svg></label>
					</span>
					<span class="styled-checkbox show-when-narrow">
						<input type="checkbox" id="togleAutoCloseTags" data-bind="checked: app.settings.autoCloseTags"></input>
						<label for="togleAutoCloseTags" title="Auto Close tags"><svg class="icon icon-tag icon-fw icon-lg"><use xlink:href="public/icons.svg#icon-tag"></use></svg></label>
					</span>

					<button id="exit-editor" class="bbcode-button bbcode-button-right hide-when-narrow hidden" data-bind="click: function() {app.saveNode(); app.closeEditor()}" title="Close Editor">
						<svg class="icon icon-exit icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-exit"></use></svg>
					</button>
					<button id="snap-editor-button" class="bbcode-button bbcode-button-right hide-when-narrow hidden" onclick="app.editorSnapToggle()" title="Snap to Other Side">
						<svg class="icon icon-snap-document icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-snap-document"></use></svg>
					</button>
					<button id="full-size-editor-button" class="bbcode-button bbcode-button-right hide-when-narrow hidden" onclick="app.toggleEditorView()" title="Full Size Editor">
						<svg class="icon icon-no-columns icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-no-columns"></use></svg>
					</button>
					<span id="split-button-separator" class="hidden">
						<span class="hide-when-narrow float-right">&nbsp;</span>
						<span class="hide-when-narrow bbcode-button-separator bbcode-button-separator-float-right">||</span>
						<span class="hide-when-narrow float-right">&nbsp;</span>
					</span>
					<span class="hide-when-narrow float-right">&nbsp;</span>
					<span class="hide-when-narrow bbcode-button-separator bbcode-button-separator-float-right">||</span>
					<span class="hide-when-narrow float-right">&nbsp;</span>
					<button class="bbcode-button bbcode-button-right" onclick="app.searchTextInEditor()" title="Search (Ctrl+f)"><svg class="icon icon-search icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-search"></use></svg></button>
					<button id="split-editor-button" class="bbcode-button bbcode-button-right hide-when-narrow" onclick="app.toggleEditorView()" title="Split View">
						<svg class="icon icon-columns icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-columns"></use></svg>
					</button>
					<span class="hide-when-narrow float-right">&nbsp;</span>
					<span class="hide-when-narrow bbcode-button-separator bbcode-button-separator-float-right">||</span>
					<span class="hide-when-narrow float-right">&nbsp;</span>

					<span class="show-when-narrow">
						<button class="bbcode-button bbcode-button-right" onclick="app.editor.redo()" title="Redo"><svg class="icon icon-undo icon-lg icon-fw icon-flip"><use xlink:href="public/icons.svg#icon-undo"></use></svg></button>
						<button class="bbcode-button bbcode-button-right" onclick="app.editor.undo()" title="Undo"><svg class="icon icon-undo icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-undo"></use></svg></button>
					</span>
				</div>

				<div class="add-link" style="position: absolute;" data-bind="visible: (!app.isEditorInPlayMode())">
					<div class="menu">
						<span id="add-link-title" class="title" onmouseenter="app.ui.openNodeListMenu('link')" onclick="app.ui.openNodeListMenu('link')">Add Link</span>
						<div id="add-link-dropdown" class="dropdown">
							<form autocomplete="off" onkeypress="return event.keyCode != 13;">
								<input class="search-field" autocomplete="off" placeholder="search" type="search" id="linkHelperMenuFilter" oninput="app.ui.openNodeListMenu('link')"></input>
							</form>
							<div id="linkHelperMenu"></div>
						</div>
					</div>
				</div>

				<div class="tooltip" id="colorPicker-container" hidden>
					<input type='text' id="colorPicker" data-bind="preventBubble: 'click', preventBubble: 'mousedown'" />
				</div>

				<div class="editor-container" id="editorContainer">
					<div class="editor-preview" id="editor-preview" onclick="app.togglePreviewMode(false)"></div>
					<div class="editor" id="editor" data-bind="
								ace: app.editing().body,
								aceOptions: { mode: app.settings.documentType(), theme: app.settings.documentType(), showPrintMargin: false,
								enableBasicAutocompletion: true,
								enableLiveAutocompletion: true,
								behavioursEnabled: true,
							}">
					</div>
				</div>

				<div class="editor-counter hide-when-narrow"	data-bind="visible: !app.isEditorInPlayMode()">
					<span class="hide-when-narrow">&nbsp;</span>
					Characters: <span class="character-count">0</span>
					<span class="hide-when-narrow">&nbsp;</span>
					Lines: <span class="line-count">0</span>
					<span class="hide-when-narrow">&nbsp;</span>
					<span class="find-text"><svg class="icon icon-coffee icon-fw"><use xlink:href="public/icons.svg#icon-coffee"></use></svg></span>
					<span class="hide-when-narrow">&nbsp;</span>
					<span class="hide-when-narrow">&nbsp;</span>
					Row Index: <span class="row-index">0</span>
					<span class="hide-when-narrow">&nbsp;</span>
					Column Index: <span class="column-index">0</span>
				</div>
				<div class="toggle-toolbar hide-when-narrow" id="editorFooter"	data-bind="visible: !app.isEditorInPlayMode()">
					<span class="hide-when-narrow">&nbsp;</span>
					<span class="styled-checkbox">
						<input id="toglShowCounter" type="checkbox" data-bind="checked: app.settings.editorStatsEnabled, event: { change: app.toggleShowCounter }"></input>
						<label for="toglShowCounter" title="Show Line Counter"><svg class="icon icon-paragraph icon-fw icon-lg"><use xlink:href="public/icons.svg#icon-paragraph"></use></svg></label>
					</span>
					<span class="styled-checkbox">
						<input id="toglSpellCheck" class="styled-checkbox" type="checkbox" data-bind="checked: app.settings.spellcheckEnabled" onclick="app.toggleSpellCheck()"></input>
						<label for="toglSpellCheck" title="Spell Check"><svg class="icon icon-spell-check icon-fw icon-lg"><use xlink:href="public/icons.svg#icon-spell-check"></use></svg></label>
					</span>
					<span class="styled-checkbox">
						<input id="toglAutocompleteSuggestions" type="checkbox" data-bind="checked: app.settings.autocompleteSuggestionsEnabled" onclick="app.toggleAutocompleteSuggestions()"></input>
						<label for="toglAutocompleteSuggestions" title="Autocompletion Suggestions"><svg class="icon icon-comment icon-fw icon-lg"><use xlink:href="public/icons.svg#icon-comment"></use></svg></label>
					</span>
					<span class="styled-checkbox">
						<input type="checkbox" id="toglAutoCloseTags" data-bind="checked: app.settings.autoCloseTags"></input>
						<label for="toglAutoCloseTags" title="Auto Close Tags"><svg class="icon icon-tag icon-fw icon-lg"><use xlink:href="public/icons.svg#icon-tag"></use></svg></label>
					</span>
					<span class="styled-checkbox">
						<input id="toglAutoCloseBrackets" type="checkbox" data-bind="checked: app.settings.autoCloseBrackets" onclick="app.toggleAutoCloseBrackets()"></input>
						<label for="toglAutoCloseBrackets" title="Auto Close Brackets"><svg class="icon icon-code icon-fw icon-lg"><use xlink:href="public/icons.svg#icon-code"></use></svg></label>
					</span>
				</div>
			</div>
			<div id="editor-resize-handle" class="hidden" data-bind="preventBubble: 'click', preventBubble: 'mousedown'">
				<span>||</span>
			</div>
		</div>
		<!-- /ko -->

		<!-- app info -->
		<div class="app-info">
			<span class="app-title" data-bind="text:`${app.settings.documentType()} syntax`"></span>
			<span class="app-version" data-bind="text:app.version"></span>
		</div>

		<!-- marquee -->
		<div id="marquee"></div>
	</div>

	<!-- Hidden fields, file dialogs, and elements -->
	<div class="hidden">
		<input type="file" id="open-file" multiple="true" accept=".json" />
		<input type="file" id="open-folder" webkitdirectory directory />
		<input type="file" id="save-file" nwsaveas="filename.txt" />
	</div>

	<!-- templates container (they get loaded into this) -->
	<div class="templates">
	</div>
	<link id="theme-stylesheet" rel="stylesheet" href="./public/themes/dorothy.css">
</body>

</html>
